<script setup lang="ts">
import dayjs from 'dayjs'
import { useRequest } from 'vue-request'
import { fetchIntercityOrderDetailAPI } from '@/apis/fetchIntercityOrderDetail'
import { IntercityOrderStatus, IntercityOrderType, getIntercityOrderStatusString, getIntercityOrderTypeString } from '@/types/enum'
import { useUserInfoStore } from '@/store/userInfo'
import { useGeneralConfigStore } from '@/store/generalConfig'

const router = useRouter()
const userInfoStore = useUserInfoStore()
const generalConfigStore = useGeneralConfigStore()

const id = ref('')

const { data: detail, loading, runAsync } = useRequest(
  () => fetchIntercityOrderDetailAPI({ id: id.value }, userInfoStore.userInfo!.token!).then(res => res.data?.data),
  { manual: true },
)

const totalMoney = computed(() => {
  if (!detail.value)
    return 0
  const payMoney = Number(detail.value?.pay_money)
  const patchMoney = Number(detail.value?.patch_money) || 0
  return payMoney + patchMoney
})

onLoad(async (options) => {
  if (!(options && options.id)) {
    uni.showToast({ title: '页面数据获取失败', icon: 'none' })
    return
  }
  id.value = options.id
  await runAsync()
  uni.setNavigationBarTitle({
    title: getIntercityOrderStatusString(detail.value?.status),
  })
})

function handleCopyOrderNumber() {
  uni.setClipboardData({
    data: detail.value?.order_number || '',
    success: () => {
      uni.showToast({ title: '复制成功' })
    },
  })
}

function handleTapSupplementaryPayment() {
  router.push({
    name: 'supplementaryPayment',
    params: { id: id.value },
  })
}

function handleCancelOrder() {
  const type = 'intercity'
  const id = detail.value!.id.toString()
  const status = detail.value!.status.toString()
  router.push({
    name: 'cancelOrder',
    params: { type, id, status },
  })
}

function handleContactPlatform() {
  uni.makePhoneCall({
    phoneNumber: generalConfigStore.generalConfig?.mobile || '',
  })
}

function handleIssueInvoice() {
  router.push({
    name: 'invoiceForm',
    params: {
      type: 'intercity',
      ids: detail.value?.id.toString() || '',
      money: detail.value?.pay_money || '',
    },
  })
}
</script>

<template>
  <Spacer height="24" />
  <view class="px-24rpx">
    <OrderStatusCard v-if="detail?.status" type="intercity" :status="detail?.status" />
  </view>
  <Spacer height="24" />
  <view class="px-24rpx">
    <Section title="订单信息">
      <template #headerTrailing>
        <view class="rounded-full from-#FF966D to-#FA5431 bg-gradient-to-r px-17rpx py-10rpx text-26rpx text-white font-bold leading-26rpx">
          {{ getIntercityOrderTypeString(detail?.type) }}
        </view>
      </template>
      <view class="flex items-center justify-between">
        <view>
          <Address dot-color="#3F8BF6">
            {{ detail?.start_place || '未知' }}
          </Address>
          <Spacer height="24" />
          <Address dot-color="#FA662F">
            {{ detail?.end_place || '未知' }}
          </Address>
        </view>
        <!-- <image
          class="h-57rpx w-57rpx flex-shrink-0"
          src="@/static/images/phone_orange_fill.png"
          @tap="handleContactPlatform"
        /> -->
      </view>
      <Spacer height="32" />
      <Divider width="642" color="#EBEBEB" />
      <Spacer height="40" />
      <TableRow label="订单编号">
        <view class="h-28rpx flex items-center overflow-visible">
          {{ detail?.order_number || '未知' }}
          <Spacer width="18" />
          <button class="border-1rpx border-#999999 rounded-10rpx border-solid bg-transparent px-8rpx py-5rpx text-28rpx text-#333333 font-medium leading-28rpx" @tap="handleCopyOrderNumber">
            复制
          </button>
        </view>
      </TableRow>
      <Spacer height="44" />
      <TableRow label="订单时间">
        {{ detail?.pay_time ? dayjs.unix(detail.pay_time).format('YYYY-MM-DD HH:mm') : '未知' }}
      </TableRow>
      <Spacer height="44" />
      <TableRow label="出发时间">
        {{ detail?.start_time || '未知' }}
      </TableRow>
      <Spacer height="44" />
      <TableRow label="购买张数">
        {{ detail?.num || '0' }}张
      </TableRow>
      <Spacer height="44" />
      <TableRow label="联系人">
        {{ detail?.passengers_name || '未知' }} {{ detail?.passengers_mobile || '未知' }}
      </TableRow>
      <block v-if="detail?.type === IntercityOrderType.城际捎件">
        <Spacer height="44" />
        <TableRow label="物品类型">
          {{ detail.goods_type || '未知' }}
        </TableRow>
        <Spacer height="44" />
        <TableRow label="备注信息">
          {{ detail.remark || '无备注' }}
        </TableRow>
        <block v-if="detail.images.length">
          <Spacer height="44" />
          <TableRow label="图片" direction="column">
            <PictureGrid
              mode="display"
              :width="642"
              :cols="3"
              :pictures="detail.images.split(',')"
            />
          </TableRow>
        </block>
      </block>
      <!-- <block v-if="detail?.status === IntercityOrderStatus.已完成">
        <Spacer height="44" />
        <TableRow label="完成时间">
          2024年01月11日 10:00
        </TableRow>
      </block> -->
      <block v-if="detail?.status === IntercityOrderStatus.已取消">
        <Spacer height="44" />
        <TableRow label="取消时间">
          {{ detail.order_cannel_time || '未知' }}
        </TableRow>
      </block>
    </Section>
    <Spacer height="24" />
    <Section title="费用信息">
      <TableRow label="付款方式">
        微信支付
      </TableRow>
      <Spacer height="44" />
      <TableRow label="实付金额">
        <view class="flex items-center">
          {{ detail?.pay_money || '0' }}元
          <!-- <image
            class="ml-8rpx h-30rpx w-30rpx"
            src="@/static/images/warning_orange_circle.png"
            @tap="handleViewPriceDescription"
          /> -->
        </view>
      </TableRow>
    </Section>
    <block v-if="detail?.patch_money && detail.patch_pay_time">
      <Spacer height="24" />
      <Section title="捎件补款">
        <TableRow label="商品名称">
          捎件补款
        </TableRow>
        <Spacer height="44" />
        <TableRow label="补款时间">
          {{ detail.patch_pay_time || '未知' }}
        </TableRow>
        <Spacer height="44" />
        <TableRow label="补款金额">
          {{ detail.patch_money || '0' }}元
        </TableRow>
      </Section>
    </block>
    <Spacer height="24" />
    <view v-if="detail?.type === IntercityOrderType.城际捎件" class="flex items-center justify-between rounded-20rpx bg-white px-32rpx py-34rpx">
      <view class="text-30rpx text-#333333 font-bold leading-30rpx">
        订单总金额
      </view>
      <view class="text-34rpx text-#F53B25 font-bold leading-34rpx">
        ¥{{ totalMoney }}
      </view>
    </view>
  </view>
  <Spacer height="360" />
  <view v-if="detail?.status === IntercityOrderStatus.已下单 && detail.type === IntercityOrderType.城际购票" class="fixed bottom-30rpx flex items-center x-center">
    <RGButton type="secondary" size="large" :width="250" @tap="handleCancelOrder">
      取消订单
    </RGButton>
    <Spacer width="30" />
    <RGButton type="primary" size="large" :width="422" @tap="handleContactPlatform">
      联系平台
    </RGButton>
  </view>
  <view v-if="detail?.status === IntercityOrderStatus.已下单 && detail.type === IntercityOrderType.城际捎件" class="fixed bottom-30rpx flex items-center x-center">
    <RGButton type="secondary" size="large" :width="250" @tap="handleCancelOrder">
      取消订单
    </RGButton>
    <Spacer width="30" />
    <RGButton type="primary" size="large" :width="422" @tap="handleTapSupplementaryPayment">
      捎件补款
    </RGButton>
  </view>
  <view v-if="detail?.status === IntercityOrderStatus.已完成" class="fixed bottom-30rpx flex items-center x-center" @tap="handleIssueInvoice">
    <RGButton type="secondary" size="large" @tap="handleIssueInvoice">
      开具发票
    </RGButton>
  </view>
  <uv-loading-page :loading="loading" loading-text="加载中..." font-size="28rpx" loading-mode="spinner" />
</template>

<route lang="yaml">
name: 'intercityOrderDetail'
</route>
